<template>
    <view mut-bind:tap="onRadioChangeTap" :class="'label label-' + placement + ' ' + (disabled ? 'label-disabled l-disabled-class' : 'l-class')">
        <view class="radio" :style="'color:' + (checked ? selectColor : disabled ? disabledColor : color) + ';font-size:' + size">
            <slot v-if="custom" name="icon" />
            <view v-else :class="'iconfont ' + (checked ? 'icon-select' : 'icon-unselect')"></view>
        </view>
        <slot />
    </view>
</template>

<script>
export default {
    unicomGroup: ['radio-group'],
    data() {
        return {
            checked: false
        };
    },
    externalClasses: ['l-class', 'l-disabled-class'],
    mixins: ['wx://form-field'],
    relations: {
        '../radio-group/index': {
            type: 'parent'
        }
    },
    props: {
        key: String,
        cell: Object,
        size: {
            type: String,
            default: '38rpx'
        },
        disabled: {
            type: Boolean
        },
        custom: Boolean,
        color: {
            type: String,
            default: '#ccc'
        },
        selectColor: {
            type: String,
            default: '#3963BC'
        },
        disabledColor: {
            type: String,
            default: '#ccc'
        },
        placement: {
            type: String,
            default: 'left'
        },
        transition: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        setChecked(e) {
            this.setData({
                checked: e
            });
        },
        onRadioChangeTap() {
            if (this.disabled) {
                return;
            }
            const e = this.getRelationNodes('radio-group')[0];
            const t = e.properties.noneChecked;
            let r = true;
            if (this.isCurrentSelectedKey(e) && ((r = false), !t)) {
                return;
            }
            const i = !this.checked;
            this.checked = i;
            const s = {
                checked: i,
                key: this.key,
                cell: this.cell
            };
            if (e) {
                e.onEmitEventHandle(s, r);
            }
        },
        isCurrentSelectedKey(e) {
            return e.properties.current === this.key;
        }
    },
    created: function () {}
};
</script>
<style>
.label {
    display: flex;
    flex: 1;
    align-items: center;
    font-size: 30rpx;
    color: #333;
    width: 100%;
}
.label-left {
    flex-direction: row;
}
.label-right {
    flex-direction: row-reverse;
    justify-content: space-between;
}
.label-disabled {
    color: #ccc;
}
.radio {
    margin-right: 20rpx;
}
.iconfont {
    font-family: iconfont !important;
    display: inline-flex;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
@font-face {
    font-family: iconfont;
    src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMMAAsAAAAABwQAAAK9AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBaIFyATYCJAMMCwgABCAFhG0HOxs9BsgekiQlqiBBkCKqgBDbFA9f+72eu7sf0SUKUEYCjq8CJBWhqlrpakx5POtO5RtaczeTEm4dEZ0nl3vZ/P4QsbZQwBuhkJZZe0ElkSkAzf+5nN4oP2/Mb1kucw086gUYBxToHtgmK5FAPIXhtYt1GOcJtC1qIDsxOz1Aq6DTAvGYpZNAm4sqilRoCvWatUW8V9NMb9Mt4F34/firLbQktYzOPXN3MgNGfhz/9uXVatVlHyGbzw1pExlbgEJcrfWep4izWxTahlppdgJ1RUhzJaqKUGrq6zv94yWijtZ3wRo06aZkroDgZ58ENGRb3WvkdwEvYZyONecufVjvlP/yCN9e6dcv/syKok+S/ILg5fk4v+4VjvzShk88ZPlDX7WRthx5hXV881Hg5krDX9Z84j7MqK4cjZR1JuLFnjJtMX7ePssP3xVQnfFiKPkScCUeVTcdonq0qYhT/P/M8y4Q5ZkuBeY3m1/gqWk5FFo2LcA/s72GnXZzDSQAVPNPvhv+Qobg0R/V/2uDnX/NTgHftl/fyIRqAfkuAJr34wv+r6xnVzEV1JaLLnWltj9bvld3AmI5oEKDYy/j9bPeaUIzJ5MgaViArGkJLdQtqOnYhrqmfWjbZNncMYEpRGlhwxaBMHQNSd8HyIbqaKE+Q83cH9QNQwFtZ2OyZ8dKsPpjjJIEZWBqDrLpUpFyHEQfNboQPZVP4qwiZPsQ5tgEbG1qKRYsqIjwHAu4abqNEApSuFSAZnIZyudLsIxLWZQmTQwh5b7mZqruTU3pUgHoHcOQJALJgFLmQKy0kiLK70/oS593QWhT8pJwC6kh7INgHHZ4qFWTlh6oRVvsRbqXazjTaG0IggJRsJICyExGIXl5JVC5flQWkkY0YUaky/o0s15UX23T+vrC9x2ANrogR4ocRfNNkUP5u9SpAwsAAAAA')
        format('woff2');
}
.icon-unselect:before {
    content: '\e6a1';
}
.icon-select:before {
    content: '\e73a';
}
</style>
